<template>
    <Row>
        <Col span="24">
            <Card shadow>
                <p slot="title">
                    <Icon type="md-pin" />
                    POI数据配置
                </p>
                <Form
                    ref="poiForm"
                    :model="formData"
                    :rules="formRules"
                    :label-width="90"
                    label-position="left"
                    class="form-wrapper"
                >
                    <FormItem label="ID前缀" prop="id">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.id"
                                    placeholder="请输入统一的ID前缀"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="图标名称" prop="iconName">
                        <Row>
                            <Col span="24">
                                <Select v-model="formData.iconName">
                                    <Option
                                        v-for="item in iconList"
                                        :value="item.url"
                                        :key="item.id"
                                        >{{ item.url }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                        <Row v-if="formData.iconName">
                            <Col span="24">
                                <img
                                    :src="getIconPreview()"
                                    style="margin-top: 12px"
                                    class="preview"
                                />
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="状态" prop="state">
                        <Row>
                            <Col span="24">
                                <Select
                                    v-model="formData.state"
                                    placeholder="请选择POI的状态"
                                >
                                    <Option
                                        v-for="item in stateList"
                                        :value="item.value"
                                        :key="item.id"
                                        >{{ item.name }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="海拔高度" prop="elevation">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.elevation"
                                    placeholder="请输入离地高度"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem
                        v-if="formData.viewMode === 'window'"
                        label="弹窗URL"
                        prop="windowUrl"
                    >
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.windowUrl"
                                    placeholder="请输入弹窗的链接地址"
                                >
                                    <span slot="prepend">http://</span>
                                </Input>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <span class="text">查询键</span>
                                <Select v-model="queryKey">
                                    <Option
                                        v-for="item in queryKeyDict"
                                        :value="item"
                                        :key="item"
                                        >{{ item }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem
                        v-if="formData.viewMode === 'window'"
                        label="弹窗尺寸"
                        prop="windowSize"
                    >
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.windowSize"
                                    placeholder="请输入弹窗尺寸，格式为“宽,高”"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="绑定名称" prop="bindOn">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.bindOn"
                                    placeholder="请输入POI的绑定名称"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="点击行为" prop="viewMode">
                        <Row>
                            <Col span="24">
                                <Select v-model="formData.viewMode">
                                    <Option
                                        v-for="item in viewModeEnum"
                                        :value="item.value"
                                        :key="item.id"
                                        >{{ item.name }}</Option
                                    >
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem
                        v-if="formData.viewMode === 'view'"
                        label="子路由名称"
                        prop="viewName"
                    >
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.viewName"
                                    placeholder="请输入点击POI后跳转的路由名称"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem>
                        <Button
                            type="success"
                            @click="savePOIData"
                            style="margin-right: 12px"
                            >保存规则</Button
                        >
                        <Button type="primary" @click="exportJSONData">
                            导出JSON
                        </Button>
                    </FormItem>
                </Form>
            </Card>
        </Col>
    </Row>
</template>

<script>
    import config from "@/config/global";
    import { busEventEmit, busEventHandle } from "@/teleport/bus";
    import { clone } from "@/libs/tools";
    import jsonDownloader from "@/libs/exportJSON";

    export default {
        name: "",
        data() {
            return {
                formData: {
                    id: null,
                    iconName: null,
                    elevation: null,
                    windowUrl: null,
                    windowSize: null,
                    bindOn: null,
                    viewMode: "window",
                    viewName: null,
                    coord: null,
                    state: null,
                },
                coordZDict: [
                    {
                        label: "相对3D世界表面",
                        value: 0,
                    },
                    {
                        label: "相对3D世界地面",
                        value: 1,
                    },
                    {
                        label: "相对3D世界海拔",
                        value: 2,
                    },
                ],
                queryKey: null,
                queryKeyDict: ["id", "name"],
                stateList: [
                    {
                        id: "state-normal",
                        value: "normal",
                        name: "正常状态",
                    },
                    {
                        id: "state-abnormal",
                        value: "abnormal",
                        name: "异常状态",
                    },
                ],
                iconList: config.iconList.map((o) => {
                    return { id: o, url: o };
                }),
                iconPreviewUrl: "",
                viewModeEnum: [
                    {
                        id: "viewmode-window",
                        value: "window",
                        name: "弹出POI Window",
                    },
                    {
                        id: "viewmode-view",
                        value: "view",
                        name: "跳入子路由",
                    },
                    {
                        id: "viewmode-match",
                        value: "match",
                        name: "点位匹配逻辑",
                    },
                ],
                formRules: {
                    id: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    elevationType: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    iconName: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    elevation: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    windowUrl: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    windowSize: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    bindOn: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    viewMode: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    viewName: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    state: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                },
                isInEdit: false,
            };
        },
        methods: {
            savePOIData() {
                this.$refs["poiForm"].validate((valid) => {
                    if (valid) {
                        this.$Message.success("POI点数据规则已保存");
                        const pageCanvas = store.poiMaker;
                        pageCanvas.outputData = pageCanvas.searchData.map(
                            (o, i) => {
                                return {
                                    id: this.formData.id + o.id,
                                    coord_z_type: this.formData.coord_z_type || 0,
                                    iconName: this.formData.iconName,
                                    elevation: this.formData.elevation,
                                    state: this.formData.state,
                                    windowUrl: `http://${this.formData.windowUrl}?${
                                        this.queryKey
                                    }=${o[this.queryKey]}`,
                                    windowSize: this.formData.windowSize,
                                    coord: `${o.location.lng},${o.location.lat}`,
                                    title: o.name,
                                    bindOn: this.formData.bindOn,
                                    cargo:o
                                };
                            }
                        );
                        busEventEmit("request-update-poi-lbs-search");
                    }
                });
            },
            getIconPreview() {
                return `${config.imageUrl}${this.formData.iconName}_marker.png`;
            },
            exportJSONData() {
                let rawData = clone(store.poiMaker.outputData);
                jsonDownloader(rawData, "poi-list.json");
            },
        },
        created() {},
    };
</script>

<style lang="" scoped>
</style>